<template>
  <div class="order-list">
		<el-card class="box-card">
		  		<div class="header1">
		  			<el-button type="primary" icon="el-icon-edit" @click="addShow">添加账号</el-button>
		  		</div>
		  		<div class="main">
		  			<el-table
					    :data="tableData"
					    stripe
					    style="width: 100%">
					    <el-table-column
					      prop="date"
					      label="贷超ID"
					      align="center">
					    </el-table-column>
					    <el-table-column
					      prop="name"
					      align="center"
					      label="贷超名称">
					    </el-table-column>
					    <el-table-column
					      prop="address"
					      align="center"
					      label="添加时间">
					    </el-table-column>
					    <el-table-column
					      prop="address"
					      align="center"
					      label="宣传语">
					    </el-table-column>
					    <el-table-column
					      prop="address"
					      align="center"
					      label="贷超图标">
					    </el-table-column>
					    <el-table-column
					      prop="address"
					      align="center"
					      label="申请人数">
					    </el-table-column>
					    <el-table-column
					      prop="address"
					      align="center"
					      label="状态">
					    </el-table-column>
					    <el-table-column
					      align="center"
					      label="标识">
					      <template slot-scope="scope">
					        <img style="width:54px;height:54px;" src="../../images/loading_1.png" height="1024" width="1024" alt="">
					      </template>
					    </el-table-column>
					    <el-table-column
					      prop="address"
					      align="center"
					      label="链接">
					    </el-table-column>
					    
					    <el-table-column
					    align="center"
					      label="操作">
					      <template slot-scope="scope">
					        <el-button @click="handleClick(scope.row)" type="text" size="small" >编辑</el-button> 
					        <span style="color:#409EFF">/</span>
					        <el-button type="text" size="small" @click="deleteFn(scope.row)">删除</el-button>
					      </template>
					    </el-table-column>
					 </el-table>
					<el-pagination
					  background
					  class="elpage"
				      @current-change="handleCurrentChange"
				      :current-page="currentPage4"
				      layout="total,  prev, pager, next, jumper"
				      :total="400">
				    </el-pagination>
		  		</div>
		</el-card>
		
		<el-dialog
	      title="添加账号"
	      :visible.sync="dialogVisible"
	      width="30%">
	      <div class="add">
	        <el-input v-model="addAccount" clearable placeholder="请输入贷超ID"><template slot="prepend">贷超ID</template></el-input>
	        <el-input v-model="addName" clearable placeholder="请输入名称"><template slot="prepend">名称</template></el-input>
	        <el-input v-model="addPhone" clearable placeholder="请输入宣传语"><template slot="prepend">宣传语</template></el-input>
	        <div class="datapic datapicCopy">
			  <el-form>
				<el-form-item label="图标" prop="typeId">
		            <el-upload
					  action="https://jsonplaceholder.typicode.com/posts/"
					  list-type="picture-card"
					  :limit="1"
					  :multiple="false"
					  :on-exceed="handleExceed"
					  :on-preview="handlePictureCardPreview"
					  :on-remove="handleRemove">
					  <i class="el-icon-plus"></i>
					</el-upload>
		        </el-form-item>
			  </el-form>
	      	</div>
	        <div class="datapic">
			  <el-form>
				<el-form-item label="标识" prop="typeId">
		            <el-select v-model="value2" placeholder="请选择">
		                <el-option v-for="item in options2" :label="item.label" :key="item.label" :value="item.value"></el-option>
		            </el-select>
		        </el-form-item>
			  </el-form>
	      	</div>
			 <el-input v-model="addLink" clearable placeholder="请输入链接"><template slot="prepend">链接</template></el-input>
	      </div>
	      <span slot="footer" class="dialog-footer">
	        <el-button @click="addCancelFn">取 消</el-button>
	        <el-button type="primary" @click="addSubmitFn" :loading="isAddSubmit">确 定</el-button>
	      </span>
	    </el-dialog>
		<!-- 编辑账号  -->
		<el-dialog
	      title="编辑账号"
	      :visible.sync="dialogVisibleEdit"
	      width="30%">
	      <div class="add">
	        <el-input v-model="editAccount" clearable placeholder="请输入贷超ID"><template slot="prepend">贷超ID</template></el-input>
	        <el-input v-model="editName" clearable placeholder="请输入名称"><template slot="prepend">名称</template></el-input>
	        <el-input v-model="editPhone" clearable placeholder="请输入宣传语"><template slot="prepend">宣传语</template></el-input>
	        <div class="datapic datapicCopy">
			  <el-form>
				<el-form-item label="图标" prop="typeId">
		            <el-upload
					  action="https://jsonplaceholder.typicode.com/posts/"
					  list-type="picture-card"
					  :limit="1"
					  :multiple="false"
					  :on-exceed="handleExceedEdit"
					  :on-preview="handlePictureCardPreviewEdit"
					  :on-remove="handleRemoveEdit">
					  <i class="el-icon-plus"></i>
					</el-upload>
		        </el-form-item>
			  </el-form>
	      	</div>
	      	<div class="datapic">
			  <el-form>
				<el-form-item label="状态" prop="typeId">
		            <el-select v-model="value3Edit" placeholder="请选择">
		                <el-option v-for="item in options2" :label="item.label" :key="item.label" :value="item.value"></el-option>
		            </el-select>
		        </el-form-item>
			  </el-form>
	      	</div>
	        <div class="datapic">
			  <el-form>
				<el-form-item label="标识" prop="typeId">
		            <el-select v-model="value2Edit" placeholder="请选择">
		                <el-option v-for="item in options2" :label="item.label" :key="item.label" :value="item.value"></el-option>
		            </el-select>
		        </el-form-item>
			  </el-form>
	      	</div>
	      	
			 <el-input v-model="editLink" clearable placeholder="请输入链接"><template slot="prepend">链接</template></el-input>
	      </div>
	      <span slot="footer" class="dialog-footer">
	        <el-button @click="editCancelFn">取 消</el-button>
	        <el-button type="primary" @click="editSubmitFn" :loading="isAddSubmitEdit">确 定</el-button>
	      </span>
	    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }],
        currentPage4:1,
        dialogVisible:false,
        addAccount:"",
        addName:"",
        addPhone:"",
        addLink:"",
        isAddSubmit:false,
        value2:"",
        options2: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶',
          disabled: true
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        dialogImageUrl: '',
        dialogVisible: false,
        dialogVisibleEdit:false,
        editAccount:"",
        editName:"",
        editPhone:"",
        value2Edit:"",
        editLink:"",
        isAddSubmitEdit:false,
        dialogImageUrlEdit:"",
        value3Edit:"",
    }
  },
  methods: {
    handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
    },
   /* detailClick(item){
    	this.$router.push({
    		path:"/orderDetails"
    	})
    	
    },*/
    //删除
    deleteFn(){
    	this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 编辑
    handleExceedEdit(files, fileList) {
        this.$message.warning(`当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    handlePictureCardPreviewEdit(file) {
		this.dialogImageUrlEdit = file.url;
		this.dialogVisibleEdit = true;
	},
	handleRemoveEdit(file, fileList) {
	console.log(file, fileList);
	},
	editCancelFn(){
		this.dialogVisibleEdit=false

	},
	editSubmitFn(){
		this.dialogVisibleEdit=false
	},
	//添加
    handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
     },
	handleRemove(file, fileList) {
	console.log(file, fileList);
	},
	handlePictureCardPreview(file) {
	this.dialogImageUrl = file.url;
	this.dialogVisible = true;
	},
    //添加账号取消
    addCancelFn(){
      this.dialogVisible = false;
      this.addAccount="";
      this.addName="";
      this.addPhone="";
    },
    //添加账号确定提交
    addSubmitFn(){
      this.dialogVisible = false;
    },
    addShow(){
      this.dialogVisible=true;
    },
    handleClick(item){
    	this.dialogVisibleEdit=true
    },
  }
}
</script>
<style>
 .bg-zm .el-input__inner{
	padding:0 4px;
	text-align: center;
}
.order-list .el-input-group__append, .el-input-group__prepend{
    padding: 0;
    width: 70px;
    text-align: center;
  }
  .order-list .datapic .el-input__inner{
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
   .order-list .datapic .el-date-editor.el-input{
      width: 305px;
    }
    .order-list .el-select{
    	display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
		display: -moz-box; /* Firefox 17- */
		display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
		display: -moz-flex; /* Firefox 18+ */
		display: -ms-flexbox; /* IE 10 */
		display: flex;
		padding-right: 6px;
    }
    .order-list .el-form-item__label{
    	background-color:#f5f7fa;
    	text-align: center;
    	padding: 0;
    	width: 70px; 
    	height: 40px;
    	font-weight: normal;
    	border: 1px solid #dcdfe6;
	    background-color: #f5f7fa;
	    text-align: center;
	    color: #909399;
	    border-right: 0;
	    border-radius: 4px;
	    -webkit-border-radius:4px;
	    -moz-border-radius:4px;
	    -webkit-box-sizing: inherit;
	       -moz-box-sizing: inherit;
	            box-sizing: inherit;
	    border-top-right-radius: 0;
	    border-bottom-right-radius: 0;
	    display: table-cell;
    }
    .order-list .datapicCopy .el-form-item__label{
    	height: 70px;
    	line-height: 70px;
    }
   .order-list .el-upload--picture-card,.order-list .el-upload-list__item{
   	width: 70px;
   	height: 70px;
   	line-height: 80px;
   }
   .order-list .el-upload-list__item-thumbnail{
		width: 70px;
		height: 70px;
   }
</style>
<style scoped lang="scss">
.bg-zm{
	.el-input{
		width:50px;
	}
}

	.order-list{
		font-size:14px;
		font-weight: normal;
		padding:10px;
		.box-card{
			width:100%;
			min-height:400px;
		}
	}
	.bg-purple{
		height:40px;
	}
	.span1{
		float: left;
		margin-right:10px;
		height:40px;
		line-height: 40px;
	}
	.mar10{
		margin-right: 10px;
	}
	.grid-content{
		float: left;
		margin-right: 10px;
	}
	.header1,.header2{
		height:40px;
		min-width: 964px;
	}
	.header2{
		margin-top:20px;
	}
	.main{
		margin-top:30px;
	}
	.elpage{
		margin:20px;
		float: right;
	}
	.add .el-input-group{
    width: 70%;
    margin-left:20px;
    margin-bottom: 20px;
  }
  .el-form-item__label{
    width:70px;
    float: left;
    line-height: 38px;
    border: 1px solid #dcdfe6;
    background-color: #f5f7fa;
    text-align: center;
    color: #909399;
    border-right: 0;
    border-radius: 4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -webkit-box-sizing: inherit;
       -moz-box-sizing: inherit;
            box-sizing: inherit;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    display: table-cell;
  }
  .datapic{
    width: 71%;
    margin-left:20px;
    height:40px;
    margin-bottom:20px;
  }
  .elpage{
    margin:20px;
    float: right;
  }
  .datapicCopy{
  	height:70px;
  }
  .datapicCopy .el-form-item__label{
  		height: 70px!important;
  }
</style>

